<template>
	<div>
		<div class="mvplay">
			<div class="title">
				<div class="iconfont icon-fanhuipt" @click="$router.go(-1), setHide()"></div>
				<p>MV详情</p>
			</div>

			<div class="video" v-if="mplay">
				<video controls :src="this.mplay"></video>
			</div>

			<div class="content" v-if="mlist">
				<van-tabs v-model="active">
					<van-tab title="MV简介">
						<div class="mvsg">
							<div class="mtitle">
								<div class="img">
									<img :src="this.mImg " />
								</div>
								<div class="mName">
									<p>{{ mlist. MvName}}</p>
									<p>{{ mlist. MInfo }}</p>
								</div>

								<!-- <div class="icon">
									<div class="iconfont icon-aixin" v-show="!edit" @click="editIcon"></div>
									<div class="iconfont icon-xihuan-wangyiicon" v-show="edit" @click="editIcon"></div>
								</div> -->
							</div>

		
						</div>
					</van-tab>

					<van-tab title="MV评价">
						<div class="appraise">
							<van-tabs type="card">
								<van-cell is-link @click="showPopup">留言</van-cell>
								<van-tab title="热门评论">
									<div class="hotComment">
										<ul>
											<li v-for="(item, index) in hotCom" :key="index">
												<div class="left">
													<img :src="item.UserImg" />
												</div>
												<div class="right">
													<div class="content">
														<p>
															<span> {{ item.Uname }}:</span>
															{{ item.Info }}
														</p>
													</div>
													<div class="date">

													
													</div>
												</div>
											</li>
										</ul>
									</div>
								</van-tab>

								
							</van-tabs>
						</div>
					</van-tab>

					<!-- <van-tab title="歌手其他MV">
						<div class="mSing">
							<ul>
								<router-link v-for="item in singIs" :key="item.id" tag="li"
									:to="'/mvplay/mvplay?id=' + item.id">
									<div class="img">
										<img :src="item.imgurl" alt="" />
									</div>
									<p>
										{{ item.name }}
									</p>
								</router-link>
							</ul>
						</div>
					</van-tab> -->
				</van-tabs>
			</div>
		</div>

		<van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
			<van-field v-model="message" autosize row="3" label="留言" type="textarea" placeholder="请输入留言">
				<template #button>
					<van-button size="small" @click="leaveMes(message)" type="primary">发送</van-button>
				</template>
			</van-field>
		</van-popup>
	</div>
</template>

<script>
	import {
		getlikeStar
	} from '../../api/singer';
	import {
		getMVDetail,
		getMVPlay,
		getMVSIng,
		getMVComment,
		getTalk,
		getMVAdd,
	} from "../../api/video";

	export default {
		data() {
			return {
				active: 0,
				mplay: null, //视频播放
				mlist: null, //信息详情
				mlists: null, //信息详情
				mImg: null, //信息详情
				singIs: {
					img1v1Url: null,
				},
				hotCom: null, //评价
				com: null, //评价
				message: null, // 发送评价传递参数
				show: false, //组件按钮
				edit: false,
				editPlayerId: [],
			};
		},
		methods: {
			leaveMes(msg) {
				// console.log();
				getTalk({
					Info: msg,
					mid: this.mlist.mid,
					uid: this.userid,
					UName:this.userName
				}).then(
					(data) => {
						getMVComment({
							page:1,
							limit:10,
							Uname:"",
							Mid: this.mlist.mid
						}).then((data) => {
							//   console.log(data);
							this.hotCom = data.data;
							// this.com = data.comments;
							console.log(this.hotCom);
							// console.log(this.com);
						});
						console.log(data);
						// this.com.unshift(data.comments);
					}
				);
				this.message = null;
				this.show = false;
			},
			showPopup() {
				this.show = true;
			},
			setHide() {
				this.$emit("get-hide-play", true);
			},

			// 收藏
			// editIcon() {
			// 	if (this.edit == false) {
			// 		getMVAdd({
			// 			mvid: this.$route.query.id,
			// 			t: 0
			// 		}).then((data) => {
			// 			console.log(data);
			// 			this.edit = false;
			// 		});
			// 	}
			// 	getMVAdd({
			// 		mvid: this.$route.query.id,
			// 		t: 1
			// 	}).then((data) => {
			// 		console.log(data);
			// 		this.edit = true;
			// 	});
			// },
			// ehot(uids) {
			// 	let index = this.hotCom.findIndex(item => item.commentId == uids);
			// 	this.hotCom[index].liked = !this.hotCom[index].liked;
			// 	if (!this.editPlayerId.includes(uids)) {
			// 		this.editPlayerId.push(uids); // 记录修改点赞
			// 	}

				// 遍历修改数组记录
			// 	getlikeStar({
			// 		id: this.$route.query.id,
			// 		cid: uids,
			// 		t: 1,
			// 		type: 1
			// 	}).then(data => {
			// 		console.log(data);
			// 	})

			// },
		},
		created() {
			let queryId = this.$route.query;
			console.log(queryId);
			if (!("id" in queryId)) {
				this.$router.push("/video");
			}

			this.$emit("getnavs-btn", false);
			this.$emit("get-hide-play", false);

			getMVDetail({
				id: queryId.id
			}).then((data) => {
				//   console.log(data);
				this.mlist = data.data;
				this.mImg = data.data.MImage;
				console.log(this.mlist.mid);
				getMVComment({
					page:1,
					limit:10,
					Uname:"",
					Mid: this.mlist.mid
				}).then((data) => {
					//   console.log(data);
					this.hotCom = data.data;
					// this.com = data.comments;
					console.log(this.hotCom);
					// console.log(this.com);
				});
				// this.mlists = data.data.desc.split("\n");

				// getMVSIng({
				// 	id: this.mImg[0].id
				// }).then((data) => {
				// 	//   console.log(data);
				// 	this.singIs = data.mvs;
				// });
			});

			getMVPlay({
				id: queryId.id
			}).then((data) => {
				//   console.log(data);
				this.mplay = data.data.Movie;
				this.userid=window.localStorage.getItem("uid")
				this.userName=window.localStorage.getItem("uName")
			});

			
		},
		watch: {
			"$route.query"() {
				let queryId = this.$route.query;
				console.log(queryId);
				if (!("id" in queryId)) {
					this.$router.push("/video");
				}

				this.$emit("getnavs-btn", false);

				getMVDetail({
					mvid: queryId.id
				}).then((data) => {
					//   console.log(data);
					this.mlist = data.data;
					this.mImg = data.data.MImage;
					this.mlists = data.data.desc.split("\n");

					getMVSIng({
						id: this.mImg[0].id
					}).then((data) => {
						//   console.log(data);
						this.singIs = data.mvs;
					});
				});

				getMVPlay({
					id: queryId.id
				}).then((data) => {
					//   console.log(data);
					//   this.mplay = data.data;
					this.$set(this, "mplay", data.data.Movie);
				});
			},
		},
	};
</script>

<style lang="less">
	.mvplay {
		width: 100%;

		.title {
			width: 100%;
			min-height: 30px;
			line-height: 30px;
			font-size: 20px;
			background-color: #0F172A;
			color: #fff;
			text-align: center;
			display: flex;
			padding: 8px 8px;
			box-sizing: border-box;

			.iconfont {
				flex: 0 0 30px;
			}

			p {
				padding-left: 5px;
			}
		}

		.video {
			width: 100%;
			height: auto;

			video {
				width: 100%;
				height: auto;
			}
		}

		.content {
			.van-tabs__line {
				background-color: #243DE2;
			}
		}

		.mvsg {
			padding: 15px;
			box-sizing: border-box;

			.mtitle {
				display: flex;

				.img {
					width: 80px;
					height: 80px;
					border-radius: 50%;

					img {
						width: 80px;
						height: 80px;
						border-radius: 50%;
					}
				}

				.mName {
					flex: 1;
					margin-left: 15px;
					line-height: 30px;
					box-sizing: border-box;

					p {
						color: #0F172A;
						font-size: 16px;
						//   // 2、让文本不会自动换行 ：
						//   white-space: nowrap;
						//   // 3、让文本溢出隐藏：
						//   overflow: hidden;
						//   // 4、文本溢出时显示省略号：
						//   text-overflow: ellipsis;

						display: -webkit-box;
						// 3、弹性盒子排列方式：垂直排列：
						-webkit-box-orient: vertical;
						// 4、规定显示几行文本：
						-webkit-line-clamp: 1;
						// 5、溢出隐藏：
						overflow: hidden;
					}
				}

				.icon {
					flex: 0 0 40px;
					text-align: center;
					color: #d44439;

					.iconfont {
						font-size: 30px;
						line-height: 50px;
					}
				}
			}

			.desc {
				padding-top: 10px;

				p {
					text-indent: 2em;
					font-size: 16px;
					padding-bottom: 10px;
				}
			}
		}

		.mSing {
			padding: 10px;

			ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				li {
					width: 48%;
					padding-bottom: 15px;

					.img {
						width: 100%;
						height: auto;
						border-radius: 10px !important;

						img {
							width: 100%;
							height: auto;
							border-radius: 10px !important;
						}
					}

					p {
						font-size: 14px;
						// 2、让文本不会自动换行 ：
						white-space: nowrap;
						// 3、让文本溢出隐藏：
						overflow: hidden;
						// 4、文本溢出时显示省略号：
						text-overflow: ellipsis;
					}
				}
			}
		}

		.appraise {
			padding: 10px;

			.hotComment,
			.comment {
				ul {
					li {
						display: flex;
						padding: 15px 0;
						border-bottom: 1px solid #aaa;

						.left {
							padding-right: 10px;

							img {
								width: 90px;
								height: 90px;
							}
						}

						&:last-child {
							border-bottom: 0px;
						}

						.right {
							width: 100%;

							.content {

								p {


									font-size: 14px;
									color: #333;

									span {
										font-size: 16px;
										color: #0c73c2;
									}
								}
							}

							.date {
								display: flex;
								justify-content: space-between;
								padding-top: 8px;
								line-height: 25px;

								p {
									font-size: 14px;
									flex: 1;
								}

								.font {
									display: flex;

									span {
										font-size: 12px;
									}

									.iconfont {
										color: #0c73c2;
										font-size: 25px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
